<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.chk_3 {
			display: none;
		}
		
		.chk_3+label {
			background-color: #fafbfa;
			padding: 0px 5px 3px 5px;
			border-radius: 50px;
			display: inline-block;
			position: relative;
			margin-right: 30px;
			-webkit-transition: all 0.1s ease-in;
			transition: all 0.1s ease-in;
			width: 60px;
			height: 25px;
			float: left;
		}
		.chk_3:checked+label:before {
			content: ' ';
			position: absolute;
			left: 45px;
		}
		
		.chk_3:checked+label:after {
			content: ' ';
			position: absolute;
			background: #4cda60;
			box-shadow: 0 0 1px #4cda60;
		}
		
		.chk_3+label:before {
			content: ' ';
			position: absolute;
			background: white;
			top: 1px;
			left: 1px;
			z-index: 999999;
			width: 25px;
			-webkit-transition: all 0.1s ease-in;
			transition: all 0.1s ease-in;
			height: 25px;
			border-radius: 100%;
			-webkit-border-radius: 100%;
			box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0px 1px rgba(0, 0, 0, 0.3);
		}
		
		.chk_3+label:after {
			content: ' ';
			position: absolute;
			top: 0;
			-webkit-transition: box-shadow 0.1s ease-in;
			transition: box-shadow 0.1s ease-in;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 100px;
			box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0, 0, 0, 0.4);
		}
	</style>

	<body>
		<span class="word_right">
            <input type="checkbox" id="checkbox_c1" class="chk_3">
            <label for="checkbox_c1"></label>
        </span>
	</body>

</html>